<template>
  <div class="wfull">
    <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
      <a-form-item label="字段名称" required>
        <ZgInput :width="160" v-model="name"></ZgInput>
      </a-form-item>
      <a-form-item label="字段编码" required>
        <ZgInput :width="160" v-model="code"></ZgInput>
      </a-form-item>
      <a-form-item label="字段类型" required>
        <div class="flx-s">
          <ZgEnum :width="160" v-model="compType" code="字段类型"></ZgEnum>
          <div class="flx-s">
            <div v-if="hasType" class="flx-s ml10">
              字典类型:<ZgDicType class="ml10" :width="160" v-model="extra.字典类型"></ZgDicType>
            </div>
            <div v-if="hasRows" class="flx-s ml10">
              行数:<ZgNumber class="ml10" :width="120" v-model="extra.行数"></ZgNumber>
            </div>
            <div v-if="hasHeight" class="flx-s ml10">
              高度:<ZgNumber class="ml10" :width="120" v-model="extra.高度"></ZgNumber>
            </div>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="默认值" v-if="hasDefaultVal">
        <div v-if="compType==='单行文本'">
          <ZgInput :width="400" v-model="strDefaultVal"></ZgInput>
        </div>
        <div v-if="compType==='整数'">
          <ZgNumber :width="160" v-model="numberDefaultVal"></ZgNumber>
        </div>
        <div v-if="compType==='浮点数'">
          <ZgNumber :width="160" v-model="numberDefaultVal" isFloat></ZgNumber>
        </div>
        <div v-if="compType==='单选框'">
          <ZgCheckbox v-model="booleanDefaultVal"></ZgCheckbox>
        </div>
        <div v-if="compType==='多选'&&extra.字典类型.length>0">
          <ZgSelectMany v-model="arrDefaultVal" :code="extra.字典类型"></ZgSelectMany>
        </div>
        <div v-if="compType==='字典'&&extra.字典类型.length>0">
          <ZgDictionary :width="240" v-model="strDefaultVal" :code="extra.字典类型"></ZgDictionary>
        </div>
        <div v-if="compType==='开关'">
          <ZgSwitch v-model="booleanDefaultVal"></ZgSwitch>
        </div>
      </a-form-item>
      <a-form-item label="模糊匹配">
        <ZgSwitch v-model="isLike"></ZgSwitch>
      </a-form-item>
      <a-form-item v-if="compType==='单行文本'" label="正则表达式">
        <ZgSelect :width="160" class="mr10" v-model="regexType" :options="regexOptions"></ZgSelect>
        <ZgInput v-if="regexType.length>0" :width="360" v-model="regex"></ZgInput>
      </a-form-item>
      <a-form-item v-if="regex.length>0" label="错误提示语">
        <ZgInput :width="400" v-model="errorMsg"></ZgInput>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { columnMixin } from './js/mixin'
import { getDataTypeByCompType, filterExtra } from './js/constant'
export default {
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  mixins: [columnMixin],
  data () {
    return {
    }
  },
  methods: {
    save () {
      if (this.name.length === 0) {
        return this.$result.error('请输入字段名称')
      }
      if (this.code.length === 0) {
        return this.$result.error('请输入字段编码')
      }
      if (this.compType.length === 0) {
        return this.$result.error('请设置字段类型')
      }
      return this.$result.ok({
        formId: this.formId,
        sort: 0,
        name: this.name,
        code: this.code,
        compType: this.compType,
        dataType: getDataTypeByCompType(this.compType),
        defaultVal: this.getDefaultVal(),
        isLike: this.isLike,
        regex: this.regex,
        errorMsg: this.errorMsg,
        extra: JSON.stringify(filterExtra(this.extra, this.compType))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
